/**
 * MIT License
 *
 * Copyright (C) 2023 Huawei Device Co., Ltd.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANT KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

import React, {useEffect, useState} from 'react';
import {
  StyleSheet,
  Text,
  ScrollView,
  Button,
  Alert,
  View,
  TextInput,
  Platform
} from 'react-native';
import Clipboard, {useClipboard} from "@react-native-clipboard/clipboard";
// import {// HMLog} from "./Log";

// Small icon of a plus for demo purposes
const TEST_IMAGE =
  'iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==';


function DateTimePickerDemo () {
  const scrollRef = React.useRef<ScrollView>(null);
  const[textResult, setTextResult] = useState('');
  const[picString, setPicString] = useState("picStringContent");
  const[image, setImage] = useState(null);


const writeImageToClipboard = async () => {
  console.warn(' in writeImageToClipboard');
  Clipboard.setImage(TEST_IMAGE);
  Alert.alert(`Copied Image to clipboard`);
};

const getImage = async () => {
  if (await Clipboard.hasImage()) {
    console.warn('getImage, in hasImage');
    const image = await Clipboard.getImagePNG();
    setImage(image);
    setPicString(image)
  } else {
    console.warn('No image in clipboard');
  }
};

const demoHasImage = async () => {
    // HMLog('demoHasImage fun enter')
    let flag = await  Clipboard.hasImage()
    setTextResult("demoHasImage end:"+flag)
    // HMLog('demoHasImage fun out:'+ flag)
    // HMLog('demoHasImage fun end')
};

return (
  <ScrollView style={styles.container_100} ref={scrollRef}>
    <Text style={styles.header}>Clipboard Module</Text>
    <Text style={styles.boldText}>方法结果:</Text>

    <View style={ styles.flex_row_auto} >
    <Text style={{minHeight:30,
                 flex:1,
                 fontSize:16,
                 paddingLeft:8,
                 textAlign:'left'
                 }}>{textResult}</Text>
    </View>
    <Text >{TEST_IMAGE}</Text>
    <Text style={styles.boldText}>picStringContent:</Text>
    <Text >{picString}</Text>
    {image && <Image source={{uri: image}} style={styles.imageContent} />}
    <Button style={{marginTop:20}} onPress={ writeImageToClipboard}  title="writeImageToClipboard" /> 
    <Button style={{marginTop:20}} onPress={ getImage}  title="getImage" /> 
    <Button style={{marginTop:20}} onPress={ demoHasImage}  title="demoHasImage" /> 

    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  container_100: {
    paddingTop:Platform.OS==='ios'?50:0,
   width:'100%',
   height:'100%',
  },
  main: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    fontWeight: '700',
    fontSize: 30,
    marginBottom: 10,
  },
  boldText: {
    fontWeight: '600',
    marginBottom: 10,
  },
  flex_row_auto:{
     flexDirection:"row",
     minHeight:50,
     paddingLeft:10,
     paddingRight:10
  },
  flex_input:{
    minHeight:30,
    flex:1,
    fontSize:14,
    borderWidth:1
  },
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: 'gray',
    width: '80%',
    marginVertical: 20,
  },
  textInput: {
    borderColor: 'gray',
    borderWidth: 1,
    width: '80%',
    paddingHorizontal: 80,
    paddingVertical: 8,
    marginBottom: 16,
  },
  textInputMacOS: {
    borderColor: 'gray',
    borderWidth: StyleSheet.hairlineWidth,
    width: 300,
    padding: 4,
    marginBottom: 16,
  },
  clipboardContent: {
    marginBottom: 20,
  },
  imageContent: {
    width: 40,
    height: 40,
  },
  imageAndroid: {
    height: 160,
    width: 160,
  },
  imageButtonAndroid: {
    marginTop: 10,
  },
});


export default DateTimePickerDemo;